<template>
  <el-header id="header">
    <div>
      <!-- <img style="width:200px;height:40px;margin:20px 0 0 -12px" src="../assets/welcome.png" /> -->
    </div>

    <el-dropdown split-button type="default">
     {{ name }}
     <!-- 张三 -->
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-header>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getSessionStorageObj, removeSessionStorage } from '../utils/common.js';
import router from "../router/index"; 

const name = ref('');

const logout = () => {
  // 登出逻辑
  // 清除 sessionStorage 中的用户信息
  removeSessionStorage('adminInfo');
  removeSessionStorage('admin_token');
  removeSessionStorage('admin_token_expires_at');
  
  // 跳转到登录页面
  router.push('/login');
  // this.$router.push("/login");
};
onMounted(() => {
  // 这里可以添加一些初始化逻辑，比如获取用户信息等
  // console.log('Header mounted');
  const adminInfo = getSessionStorageObj('adminInfo');
  name.value = adminInfo.name || '张三'; // 默认值为张三
});
</script>
  
  <style scoped>
#header {
  max-height: 50px;
  line-height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header > h2 {
  color: #0b67b8;
}
</style>